<template>
	<view>
		<!-- 问卷调查非网页版 -->
		<u-navbar title="意见反馈" placeholder @leftClick="onBackClick"  leftIconColor="#fff" bgColor="#111111"
			:titleStyle="titleStyle">
			<!-- <view slot="right">反馈记录</view> -->
		</u-navbar>
		<!-- <image class="titleIv" :src="details.image"></image>
		<view class="titleTv">{{ details.content }}</view>
		<view class="itemV" v-for="(item,index) in formList" :key="index">
			<text class="itemTv">{{item.title}}</text>
			<view class="ansV" @click="onItemClick(item,asItem,asIndex)" v-for="(asItem,asIndex) in item.option"
				:key="asIndex">
				<image class="ansIv"
					:src="item.answer&&item.answer.includes(asItem)?'../../static/select_.svg':'../../static/select.svg'">
				</image>
				<text class="ansTv">{{asItem}}</text>
			</view>
		</view> -->
		<!-- <view class="nameV">
			<text class="nameTv1">*</text>
			<text class="nameTv2">姓名</text>
			<view class="nameTv3">
				<input placeholder="请输入姓名" v-model="mName" />
			</view>
		</view> -->
		<view class="nameVtwo">
			<view>
				<text class="nameTv1">*</text>
				<text class="nameTv2">反馈内容</text>
			</view>
			<view class="nameTv3" style="margin-top: 30rpx;">
				<u--textarea v-model="content" placeholder="请输入内容" ></u--textarea>
				<!-- <input placeholder="请输入反馈内容" v-model="mGmail" /> -->
			</view>
		</view>
		<view class="sumTv" @click="onSumClick">提交</view>
		<view class="sumTvjilu" @click="jilu"><text>反馈记录</text></view>
		
		<ns-login ref="login" @saveUserInfo="onUserInfoClick"></ns-login>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				titleStyle: {
					"color": "#ffffff"
				},
				id: '',
				formList: [],
				mName: '',
				mGmail: '',
				details:{},
				content:''
			}
		},
		onShareAppMessage: function(res) {
			console.log("开始分享接收参数--->" + JSON.stringify(res))
			let shopId = this.id;
			let userId = uni.getStorageSync("user_info_id");
			return {
				title: this.details.sharetitle,
				imageUrl: this.details.shareimage,
				path: `shop/bodyBuilding/Questionnaire?id=` + shopId + `&userid=` + userId, // 分享后打开的页面
				success: function(res) {
					console.log("转发成功")
				},
				fail: function(res) {
					console.log("转发失败")
				}
			}
		},
		onLoad(e) {
			// this.id = e.id;
			// this.getForm();
			// if (uni.getStorageSync("user_info")) {
				
			// } else {
			// 	this.$refs.login.open({
			// 		show: false
			// 	});
			// }
		},
		methods: {
			onBackClick() {
				let pages = getCurrentPages();
				if (pages[pages.length - 2]) {
					//如果有上一页，就返回上一页
					wx.navigateBack({
						delta: 1
					})
				} else {
					uni.switchTab({
						url: '/pages/app/Home'
					});
				}
			
			},
			onUserInfoClick(e) {
				if (e.code == 200) {
					this.getForm();
				} else {
			
				}
			},
			getForm() {
				this.$api.getFormId({
					id: this.id
				}).then((res) => {
					res.list.map((item, index) => {
						item.answer = "";
					})
					this.formList = res.list;
					this.details = res.form;
				}).catch((e) => {

				})
			},
			onItemClick(data, item, index) {
				//多选
				if (data.type == "checkbox") {
					if (data.answer) {
						let answerList = data.answer.split(",");
						let isYes = -1;
						answerList.map((text, index) => {
							if (item == text) {
								isYes = index;
							}
						})
						if (isYes != -1) {
							answerList.splice(isYes, 1);
						} else {
							answerList.push(item);
						}
						data.answer = answerList.join(",");
					} else {
						data.answer = item;
					}
				} else { //单选
					data.answer = item;
				}
			},
			onSumClick() { //提交问卷调查
				if (!this.content) {
					uni.$u.toast("请输入反馈内容")
					return
				}
				
				this.$api.addFeedback({
					content: this.content
				}).then((res) => {
					uni.$u.toast("提交成功")
					this.content =''

				}).catch((e) => {
					console.log(e)
					uni.$u.toast(e.msg)
					// this.content =''
				})
			},
			jilu(){
				this.$u.route({
						url: '/shop/New/FanKuiLIst'
				})
			}
		}
	}
</script>

<style lang="scss">
	.titleIv{
		width: 100%;
		height: 320rpx;
	}
	.titleTv{
		color: #fff;
		font-size: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 30rpx;
	}
	.nameV {
		display: flex;
		align-items: center;
		background: #1F1F1F;
		margin-top: 20rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
		height: 90rpx;
	}
	.nameVtwo{
		display: flex;
		flex-direction: column;
		background: #1F1F1F;
		margin-top: 20rpx;
		// padding-left: 30rpx;
		// padding-right: 30rpx;
		padding: 30rpx;
		// height: 90rpx;
	}

	.nameTv1 {
		color: #D4FF45;
	}

	.nameTv2 {
		color: #fff;
		font-size: 32rpx;
		font-weight: 700;
		margin-left: 5rpx;
	}

	.nameTv3 {
		font-size: 32rpx;
		color: #fff;
		margin-left: 20rpx;
	}

	.sumTv {
		height: 100rpx;
		margin-top: 40rpx;
		border-radius: 50px;
		background: #D4FF45;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		font-weight: 500;
		color: #333737;
		margin-left: 30rpx;
		margin-right: 30rpx;
	}
	.sumTvjilu{
		position: fixed;
		width: 120rpx;
		height: 120rpx;
		bottom: 13%;
		right: 30rpx;
		font-size: 28rpx;
		font-weight: 500;
		color: #333737;
		border-radius: 50px;
		background: #D4FF45;
		display: flex;
		align-items: center;
		justify-content: center;
		
		text{
			display: inline-block;
			// width: 28px;
   			line-height: 20px;
			font-size: 28rpx;
			font-weight: 500;
			color: #333737;

		}
	}

	.itemV {
		margin-top: 20rpx;
		background-color: #1F1F1F;
		padding: 30rpx;
	}

	.itemTv {
		color: #fff;
		font-size: 32rpx;
		font-weight: 400;
	}

	.ansV {
		display: flex;
		align-items: center;
		margin-top: 20rpx;
	}

	.ansIv {
		width: 40rpx;
		height: 40rpx;
	}

	.ansTv {
		margin-left: 10rpx;
		font-size: 32rpx;
		font-weight: 400;
		color: #fff;
	}
	/deep/.u-textarea{
		color: #fff;
		background-color: transparent !important;
	}
	/deep/.uni-textarea-textarea{
		color: #fff;
	}
</style>